<script lang="ts">
import type { TColumn } from '~/components/table';
import type { TPresetBreakpoints } from '~/composables/useElementBreakpoint';
// import { valueOfRangePickerProps } from '~comp/antd-assist';
import { GameSelect } from '~/components-business/game';
import { RangeMonth } from '~/components-business/range';
import { CurrencySelect } from '~/components/currency';
import { useTransportable } from '~/composables/useTransportable';
</script>

<script lang="ts" setup>
const props = defineProps<{
  orderNo?: string;
}>();

const [setEle, eleBp] = useElementBreakpoint({});
const displayUtc = ref(true);
const transportable = useTransportable();

function useTableList(bp: Ref<TPresetBreakpoints>) {
  const [listQry, listParams] = useFilterPaginationQuery(apis.apiUserFundTransactions, {
    type_alias: { value: undefined, responsive: true },
    game_code: { value: undefined, responsive: true },
    action: { value: 'Game', responsive: true },
    currency: { value: undefined, responsive: true },
    start_time: {
      value: dayjs().startOf('month').utc(true).valueOf(),
      responsive: true,
    },
    end_time: {
      value: dayjs().endOf('month').utc(true).valueOf(),
      responsive: false,
    },
    order_no: { value: props.orderNo ? JSON.parse(props?.orderNo) : undefined, responsive: true },
  });
  const listData = computed(() => listQry.data.value?.list ?? []);

  const tableBp = computed(() => ({
    s1: bp.value.ltlg,
    s2: bp.value.lg && bp.value.lt3xl,
    s3: bp.value['3xl'],
  }));

  const tableColumn = computed(() => {
    const bp = tableBp.value;
    const columns: TColumn[] = [
      { key: 'time', name: '' },
      { key: 'name', name: $t('7Lqpshbv6qMltWfpgtyEz'), show: bp.s3 },
      { key: 'amount', name: $t('plHorg6dj8ZgRdr4b24gt'), thClass: 'text-right', tdClass: 'text-right' },
    ];
    return columns;
  });

  return {
    listQry,
    listParams,
    listData,
    tableBp,
    tableColumn,
  };
}
const { listQry, listParams, listData, tableBp, tableColumn } = useTableList(eleBp);
</script>

<template>
  <div>
    <div :ref="setEle">
      <Teleport v-if="transportable" to=".transctions .table-filter">
        <div class="gap-2 text-center" :class="{ 'flex ml-auto': eleBp['5xl'], 'grid grid-cols-2 w-full': eleBp.lt5xl }">
          <CurrencySelect
            v-model:value="listParams.currency"
            class="antd-cover__Select-3d-gray" :class="{ 'ml-auto w-35': eleBp['5xl'] }"
            size="small" labelAlign="center" allowClear :bordered="false" :placeholder="$t('uIkputJyPtyBCeeSwh2ig')"
          />
          <!-- <ARangePicker
            v-bind="valueOfRangePickerProps(listParams)"
            class="ant-cover__RangePicker-3d-gray min-w-40" :class="{ 'w-40': eleBp['5xl'] }"
            inputReadOnly :bordered="false" format="MM-DD"
          /> -->
          <RangeMonth
            v-model:startTime="listParams.start_time"
            v-model:endTime="listParams.end_time" :bordered="false"
            size="small" :virtual="false" :class="{ 'w-40': eleBp['5xl'] }"
          />

          <GameSelect
            v-model:gameType="listParams.type_alias" v-model:game="listParams.game_code"
            :class="{ 'w-40': eleBp['5xl'] }"
          />
          <TAntdTheme component="Input" theme="light">
            <AInput
              v-model:value="listParams.order_no"
              :placeholder="$t('cqGiJMsGkmOqFcpQvhJg')" allowClear
              class="col-span-full"
              :class="{ '!w-40': eleBp['5xl'] }"
            />
          </TAntdTheme>
        </div>
      </Teleport>

      <!-- 表体 -->
      <TSuspenseView v-bind="buildSvPropsOfQuery(listQry)" errorClass="min-h-40" outRender>
        <TTable indexId="uid" :columns="tableColumn" :data="listData">
          <template #time-th>
            <TDateFormatTh v-model:utc="displayUtc" />
          </template>

          <template #time-td="{ row }">
            <div v-if="!tableBp.s3" class="text-sys-text-body">
              {{ row.game?.ename }}
            </div>
            <div class="text-sys-text-body">
              {{ $d(row?.create_time, displayUtc ? 'full-utc' : 'full') }}
            </div>
          </template>
          <template #name-td="{ row }">
            <div class="text-sys-text-body">
              {{ row.game?.ename }}
            </div>
          </template>
          <template #amount-td="{ row }">
            <TAmount
              class="text-green-500"
              :class="{ '!text-white': row.amount.indexOf('-') > -1 || row.amount === '0' }"
              showPos
              :value="row.amount"
              :symbol="row?.currency?.currency"
              iconPos="right"
              colored="inherit"
              format="pad-dec"
            />
          </template>
        </TTable>

        <template #pending>
          <div v-if="eleBp.lt4xl">
            <TSkeleton v-for="i in 3" :key="i" class="grid grid-cols-2 mb-8 w-full gap-2">
              <TSkeleton type="rect" width="120px" height="15px" class="col-span-full" />
              <TSkeleton type="rect" height="15px" />
              <TSkeleton type="rect" height="15px" />
            </TSkeleton>
          </div>
          <TTableLoading v-if="eleBp['4xl']" />
        </template>
        <template #empty />
      </TSuspenseView>
    </div>

    <TPagination
      v-model:page="listParams.page" v-model:pageSize="listParams.page_size" :querier="listQry"
      class="mt-2"
    />
  </div>
</template>
